<template>
  <div class="edit">
    <el-dialog
      :title="title"
      width="60%"
      :visible="visible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleCancel"
    >
      <div class="modal-container">
        <div class="scroll-content">
          <el-form ref="form" :model="data">
            <el-form-item v-for="col in columns" :key="col.prop" :label="col.label">
              <el-input v-model="data[col.prop]" :type="type[col.prop]" @dblclick.native="changeType(col.prop)" />
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="handleCancel">取 消</el-button>
        <el-button size="mini" type="primary" @click="handleSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Edit',
  props: {
    title: {
      type: String,
      default: () => ''
    },
    visible: {
      type: Boolean,
      default: () => false
    },
    columns: {
      type: Array,
      default: () => {}
    },
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      type: {}
    }
  },
  methods: {
    handleSubmit() {
      this.$emit('handleSubmit', this.data)
      this.handleCancel()
    },
    handleCancel() {
      this.$emit('destory', false)
    },
    changeType(prop) {
      if (!this.type[prop] || this.type[prop] === 'input') {
        this.$set(this.type, prop, 'textarea')
      } else {
        this.$set(this.type, prop, 'input')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-container {
  overflow-y: auto;
}
.modal-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.modal-container::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}

.modal-container::-webkit-scrollbar-thumb {
  background-color: #aaa;
}

.scroll-content {
  height: calc(100vh / 1 / 3);
}
</style>
